<template>
  <div class="upload-container">
     
      <el-select v-model="industryForm.industryContinentID" placeholder="请选择">
        <el-option
        v-for="item in continentOptions"
        :key="item.ID"
        :label="item.industryName"
        :value="item.ID">
        </el-option>
    </el-select>
      <el-select v-if="countryOptions.length > 0" v-model="industryForm.industryCountryID" placeholder="请选择">
        <el-option
        v-for="item in countryOptions"
        :key="item.ID"
        :label="item.industryName"
        :value="item.ID">
        </el-option>
    </el-select>
      <el-select v-if="provinceOptions.length > 0" v-model="industryForm.industryProvinceID" placeholder="请选择">
        <el-option
        v-for="item in provinceOptions"
        :key="item.ID"
        :label="item.industryName"
        :value="item.ID">
        </el-option>
    </el-select>
  </div>
</template>

<script>
import { getIndustryUsableList } from '@/api/knowledge/industry'

export default {
  name: 'SecuritiesIndustry',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      industryForm:{
        industryContinentID:0,
        industryCountryID:0,      //国
        industryProvinceID:0,     //省
        industryCityID:0,         //市
        industryCountyID:0,       //县/区
        industryTownID:0          //镇
      },
      selectedData:[],          //最近一次选择的区域信息
      continentOptions:[],
      countryOptions:[],
      provinceOptions:[],
      cityOptions:[],
      countyOptions:[],
      townOptions:[]
    }
  },
  computed: {
    imageUrl() {
      return this.value
    }
  },
  created() {
    this.getRegionList()
  },
  watch: {
    "filterForm.industryContinentID"(newVal,oldVal){
        this.getRegionList(newVal)
    },
    "filterForm.industryCountryID"(newVal,oldVal){
        this.getRegionList(newVal)
    },
    "filterForm.industryProvinceID"(newVal,oldVal){
        this.getRegionList(newVal)

    },
    "filterForm.industryCityID"(newVal,oldVal){
        this.getRegionList(newVal)
    },
    "filterForm.industryCountyID"(newVal,oldVal){
        this.getRegionList(newVal)
    }
  },
  methods: {
    getRegionList:function(industryID,blockName = ""){
      let _this = this;
      getIndustryUsableList({
        "industryID":industryID
      }).then((response) => {
          if (response.code === 200) {
            console.log("地区信息：",response.data.list)
            if(blockName == 'industryContinentID'){
              _this.countryOptions = response.data.list
              _this.provinceOptions = []
              _this.cityOptions = []
              _this.countyOptions = []
              _this.townOptions = []
            }
            else if(blockName == 'industryCountryID'){
              _this.provinceOptions = response.data.list
              _this.cityOptions = []
              _this.countyOptions = []
              _this.townOptions = []
            }
            else if(blockName == 'industryProvinceID'){
              _this.cityOptions = response.data.list
              _this.countyOptions = []
              _this.townOptions = []
            }
            else if(blockName == 'industryCityID'){
              _this.countyOptions = response.data.list
              _this.townOptions = []
            }
            else if(blockName == 'industryCountyID'){
              _this.townOptions = response.data.list
            }else{              
              _this.continentOptions = response.data.list
              _this.countryOptions = []
              _this.provinceOptions = []
              _this.cityOptions = []
              _this.countyOptions = []
              _this.townOptions = []
            }
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
      
    },
    rmImage() {
      this.emitInput('')
    },
    emitInput(val) {
      this.$emit('input', val)
    },
    handleImageSuccess() {
      this.emitInput(this.tempUrl)
    }
  }
}
</script>